import React, { useState, useEffect } from 'react';
import * as service from '../../../../api/zynindex'
import * as asset from '../../../../api/ningindex'

import { PlusOutlined, HomeOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Button, Layout, Input, theme, Table, Space, Tag, Modal, Form, Select, Switch,Popover} from 'antd';
import '../Manage/Manage.scss'
const { TextArea } = Input;

const { Content } = Layout;
const { Search } = Input;
const { Option } = Select;

interface Props {

}


function Manage(props: Props) {
    
    const content = (
        <div>
             <p>停用</p>
             <p>删除</p>
        </div>
        );
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const onSearch = (value: string) => console.log(value);

    var [tableData, setTableData] = useState([ ])

    const columns: any = [
        {
            title: '仓库名称',
            dataIndex: 'ckName',
            key: 'ckName',
            width: 200,
            align: 'center',
            // render: (_: any, record: any) => <Space> <HomeOutlined />{record.ckName}</Space>,
        },
        {
            title: '仓库编码',
            dataIndex: 'ckCoding',
            key: 'ckCoding',
            width: 200,
            align: 'center',
            render: (_: any, record: any) => <div>{record.ckCoding}</div>
        },
        {
            title: '仓库地址',
            dataIndex: 'ckAddress',
            key: 'ckAddress',
            width: 300,
            align: 'center',
            render: (_: any, record: any) => <div>{record.ckAddress}</div>
        },
        {
            title: '仓库状态',
            dataIndex: 'ckState',
            key: 'ckState',
            width: 90,
            align: 'center',
            render: (_: any, record: any) => <Tag color="green">{record.ckState}</Tag>
        },
        {
            title: '备注',
            dataIndex: 'beizhu',
            key: 'beizhu',
            width: 70,
            align: 'center',
            render: (_: any, record: any) => <div>-</div>
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            width: 200,
            align: 'center',
            render: (_: any, record: any) => <Space>
                <a>添加下级仓库</a>
                <a >停用</a>
                <a >编辑</a>
                <a onClick={()=>{handleClick(record.id)}}>删除</a>
            </Space>
        },
    ]

    const [modal2Open, setModal2Open] = useState(false);

    // 仓库管理
    var warehouse_list = async () => {
        var res = await asset.warehouse_list();
        console.log(res);
        //遍历每个商品id, 给它添加key属性
        res.data.map((item: any) => {
            item.key = item.proid;
        })
        setTableData(res.data);
    }
    useEffect(() => {
        warehouse_list();
    }, [])

    // 删除仓库
    var handleClick=async(id:any)=>{
        var res=await asset.delete_manage({id})
        console.log(res);
        // setTableData(res.data);
        warehouse_list();
    }

    return (
        <div className='manage'>
            <Content
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                    background: colorBgContainer,
                }}
            >
                <div className="shang">
                    <div className="line"> </div>
                    <div className="set">仓库管理</div>
                </div>
                <div className="search-btn">
                    <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 300 }} />
                    <div className="btn">
                        <Button type="primary" onClick={() => setModal2Open(true)}><PlusOutlined /> 新增仓库</Button>
                        <Popover placement="bottomLeft" content={content} trigger="click">
                            <Button>更多操作</Button>
                        </Popover>
                    </div>
                </div>
                <Table columns={columns} dataSource={tableData} />
                <Modal
                    title="编辑仓库"
                    centered
                    open={modal2Open}
                    onOk={() => setModal2Open(false)}
                    onCancel={() => setModal2Open(false)}
                    okText="确认"
                    cancelText="取消"
                >
                    <Form>
                        <Form.Item
                            label="仓库名称"
                            name="name"
                            rules={[{ required: true, message: '请输入仓库名' }]}
                        >
                            <Input placeholder='请输入' />
                        </Form.Item>
                    </Form>
                    <Form style={{ maxWidth: 600 }} >
                        <Form.Item label="上级仓库">
                            <Select>
                                <Option value="choice">请选择</Option>
                                <Option value="buy">本地仓库</Option>
                                <Option value="one">东仓</Option>
                                <Option value="pan">西仓</Option>
                                <Option value="other">南仓</Option>
                                <Option value="other">北仓</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                    <Form>
                        <Form.Item label="仓库编码">
                            <Input placeholder="请输入" />
                        </Form.Item>
                    </Form>
                    <Form>
                        <Form.Item label="详细地址">
                            <Input placeholder="请输入" />
                        </Form.Item>
                    </Form>
                    <div className="open">
                        <Space>
                        <span className="text">仓库状态:</span>
                        <Switch checkedChildren="启用" unCheckedChildren="停用" defaultChecked />
                        </Space>
                    </div>
                    <Form placeholder='请输入' className='textarea'>
                    <Form.Item label="备注">
                        <TextArea rows={4} />
                        </Form.Item>
                    </Form>
                </Modal>
            </Content>
        </div>
    );
}

export default Manage;